import "./index.scss"
import {View} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import {useDidHide, useDidShow, useRouter, useUnload} from "@tarojs/taro"
import MyNav from "@/components/nav"
import {imagesUrl} from "@/utils/baseUrl"
import {DevAbnormalCard, DevAnalyzeCard, DevUtilCard} from "./components"
import {accessStore} from "./model"
import {uSelectIsManage} from "@/api/setting"
import AbnormalMsg from "@/components/devCard/abnormalMsg"
import {getStorage, setStorage} from "@/utils/localstoreage"

const Access: React.FC = (): JSX.Element => {
	let router = useRouter()
	const {
		pageQuery,
		accessData,
		devFunListFilter,
		updatePageDataSource,
		updatePageQuery,
		devFunListExclude,
		clearPage
	} = useContext(accessStore)

	// 当前是否是管理员的标识
	const [isManage, setIsManage] = useState("")

	// 当前设备id
	const [currentDevId, setCurrentDevId] = useState("")

	// 查询是否是管理员的函数
	const uSelectIsManageFunc = async devId => {
		console.log(currentDevId, "currentDevId")

		let userId = getStorage("userId")
		await uSelectIsManage(userId, devId).then(res => {
			console.log("查询是否是管理者", res)
			let isManage
			if (res.data == 1) {
				isManage = "是"
			} else if (res.data == 0) {
				isManage = "否"
			}
			setIsManage(isManage)
		})
	}

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Access useEffect")
	})

	// 对应 onShow
	useDidShow(() => {
		console.log("设备设置传参param", router.params.devId)

		updatePageQuery(router.params)
		// setCurrentDevId(router.params.devId)
		uSelectIsManageFunc(router.params.devId)
		updatePageDataSource()
		// uSelectIsManageFunc()
	})

	// 对应 onHide
	useDidHide(() => {
		console.log("Access useDidHide")
	})

	useUnload(() => {
		clearPage()
	})
	return (
		<View
			className="w-screen h-screen overflow-hidden flex flex-col"
			style={{
				backgroundImage: `url(${imagesUrl + "setting-access-bg.png"})`,
				backgroundSize: "100% 32.6%",
				backgroundRepeat: "no-repeat",
				backgroundColor: "#f3f3f7"
			}}
		>
			<MyNav color="#fff" style={{fontWeight: 600}}>
				设备设置
			</MyNav>

			<View className="flex-1 p-16  pb-28 overflow-y-auto">
				<DevAnalyzeCard accessData={accessData}></DevAnalyzeCard>
				{/*
        <DevAbnormalCard
          devId={pageQuery.devId}
          count={accessData.exceptionCount || undefined}
        ></DevAbnormalCard> */}
				{/* 报警栏 */}
				{/* <AbnormalMsg
					devId={pageQuery.devId}
					warningNum={accessData.exceptionCount || undefined}
					showAbnormal={false}
					style={{
						padding: "22rpx 12rpx"
					}}
					textStyle={{
						fontWeight: "700"
					}}
				></AbnormalMsg> */}

				<View className="mt-16 grid grid-cols-2 gap-x-15 gap-y-16">
					{devFunListFilter.map(item => (
						// pageQuery.isManage
						<DevUtilCard
							isManage={isManage}
							devName={accessData.devName}
							devFun={item}
						></DevUtilCard>
					))}

					<View className="grid grid-row-2 gap-y-16">
						{devFunListExclude?.["0001"] ? (
							<DevUtilCard
								isManage={isManage}
								devName={accessData.devName}
								devFun={devFunListExclude["0001"]}
							>
								<View className="text-14 font-bold">
									{devFunListExclude["0001"].devFunName}
								</View>
							</DevUtilCard>
						) : (
							<View></View>
						)}

						{devFunListExclude?.["0003"] ? (
							<DevUtilCard
								isManage={isManage}
								devName={accessData.devName}
								devFun={devFunListExclude["0003"]}
							>
								<View className="text-14 font-bold">
									{devFunListExclude["0003"].devFunName}
								</View>
							</DevUtilCard>
						) : (
							<View></View>
						)}

						{/* {devFunListExclude?.["0003"] ? (
							<DevUtilCard
								isManage={pageQuery.isManage}
								devName={accessData.devName}
								devFun={devFunListExclude["0003"]}
							>
								<View className="text-14 font-bold">{"功能控制2"}</View>
							</DevUtilCard>
						) : (
							<View></View>
						)} */}

						{/*
            {
              <DevUtilCard
                isManage={pageQuery.isManage}
                devName={accessData.devName}
                devFun={devFunListExclude['0006']}
              >
                <View className="text-14 font-bold">
                  {devFunListExclude['0006'].devFunName}
                </View>
              </DevUtilCard>
            } */}
					</View>

					{/* <View className="col-span-2 grid grid-cols-2 gap-x-15">
            <DevUtilCard
              isManage={pageQuery.isManage}
              devName={accessData.devName}
              devFun={{
                devFunCode: '0149',
                devFunDesc: devFunListExclude
                  ? devFunListExclude['0149'].devFunDesc
                  : '',
                devFunId: devFunListExclude
                  ? devFunListExclude['0149'].devFunId
                  : 0,
                devFunName: devFunListExclude
                  ? devFunListExclude['0149'].devFunName
                  : '',
                devFunValue: devFunListExclude
                  ? devFunListExclude['0149'].devFunValue
                  : '',
                devId: devFunListExclude ? devFunListExclude['0149'].devId : 0,
                status: devFunListExclude
                  ? devFunListExclude['0149'].status
                  : ''
              }}
            ></DevUtilCard>
            <View className="grid grid-row-2 gap-y-16">
              <DevUtilCard
                isManage={pageQuery.isManage}
                devName={accessData.devName}
                devFun={{
                  devFunCode: '0001',
                  devFunDesc: devFunListExclude
                    ? devFunListExclude['0001'].devFunDesc
                    : '',
                  devFunId: devFunListExclude
                    ? devFunListExclude['0001'].devFunId
                    : 0,
                  devFunName: devFunListExclude
                    ? devFunListExclude['0001'].devFunName
                    : '',
                  devFunValue: devFunListExclude
                    ? devFunListExclude['0001'].devFunValue
                    : '',
                  devId: devFunListExclude
                    ? devFunListExclude['0001'].devId
                    : 0,
                  status: devFunListExclude
                    ? devFunListExclude['0001'].status
                    : ''
                }}
              >
                <View className="text-14 font-bold">
                  {devFunListExclude
                    ? devFunListExclude['0001'].devFunName
                    : ''}
                </View>
              </DevUtilCard>

              <DevUtilCard
                isManage={pageQuery.isManage}
                devName={accessData.devName}
                devFun={{
                  devFunCode: '0003',
                  devFunDesc: devFunListExclude
                    ? devFunListExclude['0003'].devFunDesc
                    : '',
                  devFunId: devFunListExclude
                    ? devFunListExclude['0003'].devFunId
                    : 0,
                  devFunName: devFunListExclude
                    ? devFunListExclude['0003'].devFunName
                    : '',
                  devFunValue: devFunListExclude
                    ? devFunListExclude['0003'].devFunValue
                    : '',
                  devId: devFunListExclude
                    ? devFunListExclude['0003'].devId
                    : 0,
                  status: devFunListExclude
                    ? devFunListExclude['0003'].status
                    : ''
                }}
              >
                <View className="text-14 font-bold">
                  {devFunListExclude
                    ? devFunListExclude['0003'].devFunName
                    : ''}
                </View>
              </DevUtilCard>
            </View>
          </View> */}
				</View>
			</View>
		</View>
	)
}
export default observer(Access)
